<template>
	<div>

		<el-container style="position: absolute;left: 0;top: 0;bottom: 0;right: 0; overflow: hidden;">
			<el-header class="d-flex align-items-center" style="background: #545c64;">
				<a class="h5 text-light mb-0 mr-auto">
					{{ $conf.logo }}
				</a>
				<el-menu :default-active="navBar.active" mode="horizontal" @select="handleSelect"
					background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">

					<el-menu-item :index="index | numToString" v-for="(item, index) in navBar.list" :key="index">
						{{ item.name }}
					</el-menu-item>

					<el-submenu index="100">
						<template slot="title">
							<el-avatar size="small" :src="user.avatar ? user.avatar : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'">
							</el-avatar>
							{{ user.username }}
						</template>
						<el-menu-item index="100-1">修改</el-menu-item>
						<el-menu-item index="100-2">退出</el-menu-item>
					</el-submenu>

				</el-menu>

			</el-header>
			<el-container style="height: 100%;">
				<!-- 侧边布局 -->
				<el-aside width="200px">


					<el-menu :default-active="slideMenuActive" @select="slideSelect" style="height: 100%;">
						<el-menu-item :index="index | numToString" :key="index" v-for="(item, index) in slideMenus">
							<i :class="item.icon"></i>
							<span slot="title">{{ item.name }}</span>
						</el-menu-item>
					</el-menu>


				</el-aside>
				<!-- 主布局 -->
				<el-main class="bg-light" style="padding-bottom: 60px;position: relative;" v-loading="loading">

					<!-- 面包屑导航 -->
					<div class="border-bottom mb-3 bg-white" v-if="bran.length > 0"
						style="padding: 20px;margin: -20px;">
						<el-breadcrumb separator-class="el-icon-arrow-right">
							<el-breadcrumb-item v-for="(item, index) in bran" :key="index" :to="{ path: item.path }">
								{{ item.title }}</el-breadcrumb-item>
						</el-breadcrumb>
					</div>

					<!-- 主内容 -->
					<router-view></router-view>


					<el-backtop target=".el-main" :bottom="100">
						<div
							style="height: 100%; width: 100%; background-color: #f2f5f6; box-shadow: 0 0 6px rgba(0,0,0, .12); text-align: center;  line-height: 40px; color: #1989fa;">
							UP</div>
					</el-backtop>


				</el-main>
			</el-container>
		</el-container>

	</div>
</template>

<script>
import common from "@/common/mixins/common.js"
import { mapState } from 'vuex'
export default {
	mixins: [common],
	provide() {
		return {
			layout: this
		}
	},
	data() {
		return {
			bran: [],
			loading: false
		}
	},
	created() {
		// 获取面包屑导航
		this.getRouterBran()
		// 初始化选中菜单
		this.__initNavBar()
	},
	watch: {
		'$route'(to, from) {
			// 本地存储
			localStorage.setItem('navActive', JSON.stringify({
				top: this.navBar.active || '0',
				left: this.slideMenuActive || '0'
			}))
			this.getRouterBran()
		}
	},
	computed: {
		...mapState({
			user: state => state.user.user,
			navBar: state => state.menu.navBar
		}),
		slideMenuActive: {
			get() {
				let item = this.navBar.list[this.navBar.active]
				return item ? item.subActive : '0'
			},
			set(val) {
				let item = this.navBar.list[this.navBar.active]
				if (item) {
					item.subActive = val
				}
			}
		},
		slideMenus() {
			let item = this.navBar.list[this.navBar.active]
			return item ? item.submenu : []
		}
	},
	methods: {
		//
		toIndex(key,keyPath){
			this.navBar.active = '0'
			// 默认选中跳转到当前激活
			this.slideMenuActive = '0'
			if (this.slideMenus.length > 0) {
				this.$router.push({
					name: this.slideMenus[this.slideMenuActive].pathname
				})
			}
		}
		,
		// 显示loading
		showLoading() {
			this.loading = true
		},
		// 隐藏loading
		hideLoading() {
			this.loading = false
		},
		__initNavBar() {
			let r = localStorage.getItem('navActive')
			if (r) {
				r = JSON.parse(r)
				this.navBar.active = r.top
				this.slideMenuActive = r.left
				this.$router.push({
					name: this.slideMenus[this.slideMenuActive].pathname
				})
			}
		},
		// 获取面包屑导航
		getRouterBran() {
			let b = this.$route.matched.filter(v => v.name)
			let arr = []
			b.forEach((v, k) => {
				// 过滤layout和index
				if (v.name === 'index' || v.name === 'layout') return
				arr.push({
					name: v.name,
					path: v.path,
					title: v.meta.title
				})
			})
			if (arr.length > 0) {
				arr.unshift({ name: 'index', path: '/index', title: '后台首页' })
			}
			this.bran = arr
		},
		handleSelect(key, keyPath) {
			if (key === '100-1') {
				return console.log('修改资料')
			}
			if (key === '100-2') {
				// 退出登录
				return this.logout()
			}
			this.navBar.active = key
			// 默认选中跳转到当前激活
			this.slideMenuActive = '0'
			if (this.slideMenus.length > 0) {
				this.$router.push({
					name: this.slideMenus[this.slideMenuActive].pathname
				})
			}
		},
		slideSelect(key, keyPath) {
			this.slideMenuActive = key
			// 跳转到指定页面
			this.$router.push({
				name: this.slideMenus[key].pathname
			})
		},
		// 退出登录
		logout() {
			this.axios.post('/admin/logout', {}, {
				token: true,
				loading: true
			}).then(res => {
				this.$message('退出成功')
				// 清除状态和存储
				this.$store.commit('logout')
				// 返回到登录页
				this.$router.push({ name: "login" })
			}).catch(err => {
				console.log(err.response);
				// 清除状态和存储
				this.$store.commit('logout')
				// 返回到登录页
				this.$router.push({ name: "login" })
			})
		}
	}
}
</script>

<style></style>
